<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <title>CSS Animation Timing Function</title>
</head>
<body>
    <div class="main-area">
        <div class="heading-box">
            <h1><i class="fa fa-spinner fa-spin"></i> CSS Animation Timing Function</h1>
            <p>The animation-timing-function CSS property sets how an animation progresses through the duration of each cycle.</p>
        </div>
        <div class="animation-box">
            <div class="each-box">
                <p><span>01</span> Linear</p>
                <div id="div1"></div>
             </div>
             <div class="each-box">
                <p><span>02</span> Ease</p>
                <div id="div2"></div>
             </div>
             <div class="each-box">
                <p><span>03</span> Ease-in</p>
                <div id="div3"></div>
             </div>
             <div class="each-box">
                <p><span>04</span> Ease-out</p>
                <div id="div4"></div>
             </div>
             <div class="each-box">
                <p><span>05</span> Ease-in-out</p>
                <div id="div5"></div>
             </div>
             <div class="each-box">
                <p><span>06</span> Cubic-bezier(0,0,1,1)</p>
                <div id="div6"></div>
             </div>
        </div>
    </div>
    <footer>
        <p>Designed & Developed by <a href="https://github.com/RahulSahOfficial">Rahul Sah</a></p>
    </footer>
</body>
</html>